<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">加创货架后台管理系统V2</div>
			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="用户名">
						<template #prepend>
							<el-button icon="el-icon-user"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="密码" v-model="param.password" @keyup.enter="submitForm()">
						<template #prepend>
							<el-button icon="el-icon-lock"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm()">登录</el-button>
				</div>
				<div class="arr-wrap" v-if="isDev">
					<div class="arr-item" v-for="(e, i) in arr" :key="i" @click="handleItem(e)">
						{{ e[0] }}
					</div>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script>
import { BASE } from "@/assets/js/define.js";
import { mapMutations } from "vuex";

export default {
	data() {
		return {
			arr: [
				["钟柳超管", "123456"],
				["CAD业务员", "123456"],
				["接单业务员", "123456"],
				["仓库业务员", "123456"],
				["mini", "123"],
				["18320943482", "123123"],
				["18320943481", "123123"],
				["zpp", "123456"],
				["admin", "123456"],
				["aaa", "123"],
				["湖南仓主管", "123123"],
				["长麻钟钟", "123456"],
			],
			isDev: false,
			param: {
				username: "",
				password: "",
			},
			rules: {
				username: [
					{
						required: true,
						message: "请输入用户名",
						trigger: "blur",
					},
				],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
		};
	},
	mounted() {
		let v = false;
		if (window.location.host.includes("localhost")) {
			v = true;
			this.param = {
				username: "sun",
				password: "123456",
			};
		}
		const { debug = "" } = this.$route.query;
		if (!!debug) v = true;
		this.isDev = import.meta.env.MODE == "dev" && !!v;
	},
	methods: {
		...mapMutations(["modify"]),
		handleItem(e) {
			this.param.username = e[0];
			this.param.password = e[1];
			this.submitForm();
		},
		submitForm() {
			const formEl = this.$refs.login;
			formEl.validate((valid) => {
				if (valid) {
					this.$api.login(this.param).then((res) => {

						const { roleName, authority = [] } = res;
						this.modify({ userData: res });
							this.$quinn.setStorage("userData", res);
							if (res.token) {
								this.$quinn.setStorage("token", res.token);
								if (window.location.href.indexOf('1570') > -1 || window.location.href.indexOf('local') > -1) {
									//测试
									// window.location.href = `${BASE}#${HOME_PATH}`;
									window.location.href = 'http://192.168.0.153:1570/';
									// window.location.href = 'http://localhost:1570/'
								} else {
									// 正式
									window.location.href = 'https://shelves.jiachuangnet.com'
								}
							} else {
								this.$quinn.clearStorage();
							}

						// if ((authority || []).includes(199)) {
						// 	this.modify({ userData: res });
						// 	this.$quinn.setStorage("userData", res);
						// 	if (res.token) {
						// 		this.$quinn.setStorage("token", res.token);
						// 		if (window.location.href.indexOf('1570') > -1 || window.location.href.indexOf('local') > -1) {
						// 			//测试
						// 			// window.location.href = `${BASE}#${HOME_PATH}`;
						// 			// window.location.href = 'http://192.168.1.101:1570/';
						// 			winddow.location.href = 'http://localhost:1570/'
						// 		} else {
						// 			// 正式
						// 			window.location.href = 'https://shelves.jiachuangnet.com'

						// 		}
						// 	} else {
						// 		this.$quinn.clearStorage();
						// 	}
						// } else this.$message(`【${roleName || "当前"}】账号暂不支持访问`);
					});
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
.login-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(../src/assets/img/login-bg.jpg);
	background-size: 100% 100%;
}

.ms-title {
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	border-bottom: 1px solid #ddd;
}

.ms-login {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 350px;
	margin: -190px 0 0 -175px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.ms-content {
	padding: 30px 30px;
}

.login-btn {
	text-align: center;
}

.login-btn button {
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
}

.login-tips {
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}

.arr-wrap {
	display: flex;
	flex-wrap: wrap;

	.arr-item {
		margin-right: 10px;
		margin-bottom: 5px;
		padding: 5px;
		cursor: pointer;
	}
}
</style>
